<!--这是查看求 场地 详情组件-->
<template>
	<div>
		<div style="width: 800px;margin: 0 auto;">
			<div style="padding-top: 10px;">
				<p class="title">编辑 求 场地</p>
				<p class="label-p">
					<label for=""><span style="color: red">*</span>所求标题:</label><el-input v-model="title" placeholder="请输入所求标题（不超过30个字）" style="width: 350px"></el-input>
				</p>
				<div class="label-p">
					<label for="" style="float: left;"><span style="color: red">*</span>位置要求:</label>
					<v-distpicker :province="citySelect.province" :city="citySelect.city" :area="citySelect.area" style="float: left;"></v-distpicker>
				</div>
				<p class="label-p">
					<label for=""><span style="color: red">*</span>场地类别:</label>
					<el-select  style="width: 350px;" v-model="selectField" placeholder="请选择">
					    <el-option v-for="item in fieldOption"
						      :key="item.id"
						      :label="item.value"
						      :value="item.value"></el-option>
					</el-select>
				</p>
				<p class="label-p">
					<label for=""><span style="color: red">*</span>日均费用:</label>
					<el-select  style="width: 350px;" v-model="selectCost" placeholder="请选择">
					    <el-option v-for="item in costOption"
						      :key="item.id"
						      :label="item.value"
						      :value="item.value"></el-option>
					</el-select>
				</p>
				<p class="label-p">
					<label for=""><span style="color: red">*</span>需容纳人数:</label><el-input v-model="memberNum" placeholder="请填写容纳人数" style="width: 350px"></el-input>
				</p>
				<p class="label-p" >
					<label for="">场地要求:</label><el-input v-model="fieldIntro" placeholder="请输入场地要求(非必填，不超过100个字)" style="width: 350px;"></el-input>
				</p>
				<p class="label-p">
					<label for=""><span style="color: red">*</span>联系人:</label><el-input v-model="contact" placeholder="请填写联系人" style="width: 350px"></el-input>
				</p>
				<p class="label-p">
					<label for=""><span style="color: red">*</span>联系方式:</label><el-input v-model="phone" placeholder="请填写联系方式" style="width: 350px"></el-input>
				</p>
				<p class="label-p">
					<label for="">微信号:</label><el-input v-model="wechatNum" placeholder="请填写微信号" style="width: 350px"></el-input>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
import VDistpicker from 'v-distpicker' // 引入城市选择器插件
export default {
  components: {
    VDistpicker
  },
  data() {
    return {
      title: null, // 所求标题
      citySelect: { province: '福建省', city: '厦门市', area: '集美区' }, // 所在地区
      selectField: null, // 选择的场地类别
      selectCost: null, // 日均费用
      memberNum: null, // 容纳人数
      fieldIntro: null, // 场地简介
      contact: null, // 联系人
      phone: null, // 联系方式
      wechatNum: null, // 微信号
      costOption: [
        {
          id: 0,
          value: '免费'
        },
        {
          id: 1,
          value: '1千以下'
        },
        {
          id: 2,
          value: '1千-2千'
        },
        {
          id: 3,
          value: '2千-5千'
        },
        {
          id: 4,
          value: '5千-1万'
        },
        {
          id: 5,
          value: '1万-2万'
        },
        {
          id: 6,
          value: '2万-5万'
        },
        {
          id: 7,
          value: '5万以上'
        }
      ],
      fieldOption: [
        {
          id: 0,
          value: '不限'
        },
        {
          id: 1,
          value: '会所'
        },
        {
          id: 2,
          value: '户外'
        },
        {
          id: 3,
          value: '山庄'
        },
        {
          id: 4,
          value: '酒店'
        },
        {
          id: 5,
          value: '其他'
        }
      ]
    }
  },
  methods: {
  }
}
</script>
<style scoped>
	p,h3,h1 {margin:0;padding:0}
	.title{
		font-size: 18px;
		line-height: 36px;
		padding: 0 10px;
	}
	label {
		font-weight: 500;
		width: 150px;
		display: inline-block;
		text-align: right;
		margin-right: 30px;
	}
	.label-p{
		line-height: 50px;
		overflow: hidden;
	}
</style>